<!--
 * @Descripttion: 外购入库核算
 * @version: V1.0
 * @Author: GaoWei
 * @Date: 2021-06-16 11:00:28
 * @LastEditors: GaoWei
 * @LastEditTime: 2021-07-08 15:57:11
-->
<template>
    <div class="content-wrapper a-base-container">
        <div class="accont-set-wrapper business-big-box wh100">
            <!-- 按钮 -->
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <!-- <a-col :span="2" v-if="permissions.includes('customer:add')">
                            <div class="btns" @click="addshowModal">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </div>
                        </a-col> -->
                        <!-- <a-col :span="2" v-if="permissions.includes('customer:edit')">
                            <div class="btns" @click="Edit()">
                                <a-icon class="btns-icon" type="edit" />
                                <div class="btns-text">修改</div>
                            </div>
                        </a-col> -->
                        
                        <a-col :span="2">
                            <div class="btns" @click="getData(1)">
                                <a-icon class="btns-icon" type="file-search" />
                                <div class="btns-text">查询</div>
                            </div>
                        </a-col>
                        <a-col :span="2" v-if="permissions.includes('customer:delete')">
                            <div class="btns">
                                <a-icon class="btns-icon" type="file" />
                                <div class="btns-text">钩稽</div>
                            </div>
                        </a-col>
                        <a-col :span="2" v-if="permissions.includes('customer:delete')">
                            <div class="btns">
                                <a-icon class="btns-icon" type="file" />
                                <div class="btns-text">核算</div>
                            </div>
                        </a-col>
                        <a-col :span="2">
                            <div class="btns">
                                <a-icon class="btns-icon" type="sync" />
                                <div class="btns-text">刷新</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>
            <!-- 搜索条件 -->
            <!-- <a-row type="flex" class="search-wrapper">
                <a-col :span="18" :order="1">
                    <a-form :layout="'inline'" :from="from">
                        <a-form-item label="客户名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
                            <a-input v-model="customerName" placeholder="客户名称" />
                        </a-form-item>
                        <a-form-item label="客户拼音码" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
                            <a-input v-model="customerPym" placeholder="客户拼音码" />
                        </a-form-item>
                        <a-form-item label="客户编号" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
                            <a-input v-model="customerCode" placeholder="客户编号" />
                        </a-form-item>
                    </a-form>
                </a-col>
            </a-row> -->

            <!-- 表格数据 -->
            <h3 class="text-center margin-top-10">
                采购入库核算
            </h3>
            <div class="table-wrapper">
                <a-table :columns="columns" :customRow="customClick" :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :data-source="postData" :scroll="{ x: 1000, y: 300 }" :pagination="pagination" @change="onTableChange" :loading="loading" :size="small" bordered>
                    <span slot="type" slot-scope="id">
                        {{showCustomerType(id)}}
                    </span>
                    <!-- 操作 -->
                    <template slot="operate" slot-scope="text, record, index">
                        <div class="row justify-content-md-center">
                            <span class="col-sm-auto col-md-auto col-lg-auto col-xl-auto">
                                <a href="javascript:;" title="删除" class="mr-1 col-1" @click="Delete(record,index)"><i class="fa fa-trash-alt" style="color: #dd5a43;"></i></a>
                                <a href="javascript:;" title="修改" class="mr-1 col-1" @click="Edit(record,index)"><i class="fa fa-edit" style="color: #40a9ff;"></i></a>
                            </span>
                        </div>
                    </template>
                </a-table>
            </div>
            <!-- 弹出框 -->

        </div>
    </div>
</template>
<script>
const columns = [
    {
        title: "日期",
        dataIndex: "crmSimpleName",
        key: "crmSimpleName",
    },
    {
        title: "供应商",
        dataIndex: "crmName",
        key: "crmName",
    },
    {
        title: "发票编码",
        dataIndex: "crmNo",
        key: "crmNo",
    },
    {
        title: "是否审核",
        dataIndex: "companyNumber",
        key: "companyNumber",
    },

    // {
    //     title: "客户分类",
    //     key: "partnerClassId",
    //     dataIndex: "partnerClassId",
    //     scopedSlots: { customRender: "type" },
    // },
    {
        title: "制单人",
        key: "areaName",
        dataIndex: "areaName",
    },
    {
        title: "物料名称",
        key: "legalPerson",
        dataIndex: "legalPerson",
    },
    {
        title: "物料编码",
        key: "enterpriseScale",
        dataIndex: "enterpriseScale",
    },
    {
        title: "规格型号",
        key: "industry",
        dataIndex: "industry",
    },
    {
        title: "计量单位",
        key: "registerCapital",
        dataIndex: "registerCapital",
    },
    {
        title: "数量",
        key: "address",
        dataIndex: "address",
    },
    {
        title: "单价",
        key: "address",
        dataIndex: "address",
    },
    {
        title: "含税单价",
        key: "address",
        dataIndex: "address",
    },
    {
        title: "金额",
        key: "address",
        dataIndex: "address",
    },
];
import { mapState } from "vuex";
import { list, remove } from "@/api/erp/customer";
import { list as partnerList } from "@/api/erp/partnerClass";
//区域选择
import { treeList } from "@/api/area";
import { areaPageListToTreeForId } from "@/utils/tree";

export default {
    data() {
        // this.cacheData = data.map((item) => ({ ...item }));
        return {
            customerName: "", //客户名称
            areaName: "", //所属地区
            customerType: "", //客户类型
            customerPym: "",    //客户拼音码
            customerCode: "",   //客户编码
            partnerClass: [], //客户分类
            postData: [],
            loading: false,
            editingKey: "",
            columns: columns,
            form: "",
            formLayout: "inline",
            pagination: {
                size: "small",
                current: 1,
                pageSize: 20,
                total: 0,
                showTotal: (total) => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input
                                style="height:22px !important;width:3.2rem;"
                                value={this.pagination.pageSize}
                                min={1}
                                max={500}
                                size="small"
                                onPressEnter={(e) => this.changePageSize(e)}
                            />条
                        </div>
                    );
                },
                onChange: (page) => {
                    this.pagination.current = page;
                    this.getData();
                },
                showQuickJumper: true,
                showLessItems: true
            },
            customClick: (record) => ({
                on: {
                    dblclick: (event) => {
                        event.preventDefault();
                        this.selectData = [];
                        this.selectData.push(record);
                        this.Edit();
                    },
                },
            }),
            //行政区信息
            regions: [],
            selectData: [],
            selectedRowKeys: [],
        };
    },
    beforeCreate() {
        this.form = this.$form.createForm(this, { name: "a" });
    },
    created() {
        this.getData();
        this.areaTree();
        // this.getCustomerType();//客户分类
    },
    computed: {
        formItemLayout() {
            const { formLayout } = this;
            return formLayout === "inline"
                ? {
                    labelCol: { span: 10 },
                    wrapperCol: { span: 14 },
                }
                : {};
        },
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    methods: {
        //加载 区域数据
        areaTree() {
            treeList()
                .then((response) => {
                    if (response.code === 200) {
                        const { data } = response;
                        const childrenNav = [];
                        const province = data.filter((f) => f.parentCode == 0);
                        this.taxAreaList = province;
                        areaPageListToTreeForId(data, childrenNav, 0);
                        console.log("加载 区域数据:", childrenNav);
                        this.regions = childrenNav;
                    }
                })
                .catch((error) => { });
        },
        //地区选择事件
        onAreaChange(value, selectedOptions) {
            this.areaText = selectedOptions.map((o) => o.areaCode)[
                selectedOptions.length - 1
            ];

            this.areaName = selectedOptions.map((o) => o.areaName).join("/");
            console.log(this.areaText, this.areaName);
        },
        handleCheckedType(value) {
            this.customerType = value;
            console.log(value)
        },
        /**
         * 分页
         * size: 每页好多条, current: 当前页 ,total:总条数
         */
        //改变分页大小
        changePageSize(e) {
            console.log(e);
            const value = e.target.value;
            let size = Number.parseInt(value);
            if (!size) {
                size = 20;
            }
            if (size > 500) {
                size = 500;
            }
            const { pagination } = this;
            Object.assign(this.pagination, {
                current: 1,
                pageSize: size,
            });
            this.getData();
        },
        getData(current) {
            if (current) {
                Object.assign(this.pagination, {
                    current
                });
            }
            //获取列表数据
            let params = {
                // partnerClassId: this.customerType,//客户类型
                // customerName: this.customerName, //单位名称
                // areaName: this.areaName, //所属地区
                phonetic: this.customerPym,//客户拼音码
                crmNo: this.customerCode,//客户编码
                name: this.customerName,
                current: this.pagination.current,
                size: this.pagination.pageSize,
                isFinance: 1,
            };
            console.log(params);
            list(params).then((res) => {
                if (res.code == 200) {
                    this.postData = res.data.records;
                    Object.assign(this.pagination, {
                        total: res.data.total,
                    });
                    console.log(this.pagination);
                } else {
                    // this.$message.warning(res.message);
                }
            });
        },
        addshowModal() {
            //新增
            this.$refs.addModalHock.handleAdd();
        },
        Delete() {
            //删除
            if (this.selectedRowKeys.length != 1) {
                this.$message.warning('请选择一条数据！');
                return;
            }
            let _this = this;
            this.$confirm({
                title: "确认",
                content: (
                    <span>您确定要{<span style="color:red;">删除</span>}该记录吗？</span>
                ),
                onOk() {
                    remove({ id: _this.selectData[0].id }).then((response) => {
                        if (response.code === 200) {
                            _this.$message.success("删除成功");
                            _this.selectData = [];
                            _this.selectedRowKeys = [];
                            _this.getData(); //刷新数据
                        } else {
                            _this.$message.error(response.message);
                        }
                    });
                },
                onCancel() { },
            });
        },
        Edit() {
            if (!this.selectData || this.selectData.length != 1) {
                this.$message.warning('请选择一条数据！');
                return;
            }
            //修改
            let data = JSON.parse(JSON.stringify(this.selectData[0]));
            this.$refs.addModalHock.handleEdit(data);
        },
        getCustomerType() {
            //获取客户分类
            let params = {
                current: 1,
                size: 500,
                type: 1,
            };
            partnerList(params).then((res) => {
                if (res.code == 200) {
                    this.partnerClass = res.data.records;
                } else {
                    // this.$message.warning(res.message);
                }
            });
        },
        showCustomerType(id) {
            if (this.partnerClass.length > 0) {
                let array = this.partnerClass.filter(item => item.id == id);
                return array[0].name;
            }

        },
        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
        },
        onSelectChange(keys, data) {
            this.selectedRowKeys = keys;
            this.selectData = data;
        },
    },
};
</script>
<style lang="less">
@import "~@/style/setting/business.less";
.accont-set-wrapper {
    display: flex;
    flex-direction: column;
    .btn-wrapper > button {
        margin-right: 10px;
    }
    .btn-wrapper > button:first-child {
        margin-bottom: 10px;
    }
    .divider {
        margin: 0.5rem 0;
        height: 0.1px;
    }
    .table-wrapper {
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        height: calc(100% - 60px);
        margin:10px;
    }

    .search-wrapper {
        label:not(.form-check-label):not(.custom-file-label) {
            font-weight: normal;
        }
        .ant-form .ant-form-item {
            margin-bottom: 0;
        }
        .ant-input {
            height: 28px;
            line-height: 28px;
            font-size: 12px;
        }
        label {
            margin-bottom: 0px;
        }
        .btn-search {
            margin-top: 4px;
        }
    }

    /** important */
    .ant-table-body {
        overflow: scroll;
        height: 0;
        max-height: none !important;
        cursor: pointer;
    }
}
</style>